<template>
	<div class="power-chart-box">
		<div id="powerChart"></div>
	</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";

const props = defineProps({
	chartData: {
		type: Array,
		default: () => [],
	},
});
// let dataArr = ref([
// 	{
// 		name: "财务部",
// 		value: 11,
// 	},
// 	{
// 		name: "后勤部",
// 		value: 9,
// 	},
// 	{
// 		name: "产品部",
// 		value: 8,
// 	},
// 	{
// 		name: "销售部",
// 		value: 7,
// 	},
// 	{
// 		name: "服务部",
// 		value: 6,
// 	},
// 	{
// 		name: "市场部",
// 		value: 5,
// 	},
// 	{
// 		name: "人事部",
// 		value: 4,
// 	},
// ]);



let powerChartRef = null;
let initPowerChartData = (dataArr) => {
  let sum = 0;
  for (let i = 0; i < dataArr.length; i++) {
    let item = dataArr[i];
    sum += item.value;
  }
  let options = reactive({
    series: [
      {
        type: "pie",
        data: [
          ...dataArr,
          {
            name: "all",
            value: sum,
            itemStyle: {
              color: "transparent",
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        ],
        center: ["50%", "100%"],
        radius: ["35%", "140%"],
        startAngle: -180,
        label: {
          formatter: (param) => {
            return `{a|${param.value}千}\n{b|${param.name}}`;
          },
          rich: {
            a: {
              align: "center",
              color: "#D8F0FF",
              textShadowColor: "#3FBFFF",
              textShadowBlur: 2,
            },
            b: {
              align: "center",
              color: "rgba(216,240,255,0.8)",
            },
          },
        },
        labelLine: {
          show: false,
        },
        emphasis: {
          // disabled: true,
          // scale: false,
        },
        itemStyle: {
          color: {
            type: "radial",
            x: 0.5,
            y: 1,
            r: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0,213,255,0)",
              },
              {
                offset: 1,
                color: "rgba(0,213,255,0.85)",
              },
            ],
          },
        },
        // roseType: "radius",
      },
    ],
  });
	powerChartRef.setOption(options);
};
const initPowerChart = (dataArr) => {
	powerChartRef = echarts.init(document.getElementById("powerChart"));
	initPowerChartData(dataArr);
};
defineExpose({
	initPowerChart,
});
</script>
<style lang="scss" scoped>
.power-chart-box {
	width: 100%;
	height: 100%;
	#powerChart {
		width: 100%;
		height: 100%;
	}
}
</style>
